<!--
 * @Description: 
 * @Autor: ZachGmy
 * @Date: 2021-06-23 14:33:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2021-06-23 15:48:32
-->
<template>
  <div>
    <!-- 使用vue进行事件的监听 点击方法 键盘按下执行的方法 -->
    <!-- 实现最简单的计数器 -->
    <!-- <button v-on:click="add">+</button> -->
    <!-- <div>{{ count }}</div> -->
    <!-- v-on 语法糖形式 @ -->
    <!-- 控制按钮是否可用 disabled -->
    <!-- <button @click="count--" :disabled="count <= 0">-</button> 
    -->

    <!-- 事件冒泡 -->
    <div class="father" @click="fatherClick">
      father
      <!-- .stop 阻止事件冒泡 -->
      <div class="div1" @click.stop="div1Click">div1</div>
    </div>
    <!-- 阻止事件的默认行为 -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="div1Click" />
    </form>

    <!-- 键盘弹起的时候执行的方法 -->
    <input @keyup.enter="keyCodeClick" type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  // 实现方法 数据逻辑交互 异步请求
  methods: {
    // 点击加1的方法
    // event 形式参数
    // 实际参数 add(1)
    add(event) {
      // 获取data中的count
      this.count++;
      console.log(event);
    },
    fatherClick() {
      console.log("父元素被点击了");
    },
    div1Click() {
      console.log("子元素被点击了");
    },
    keyCodeClick() {
      console.log("enter键");
    },
  },
};
</script>

<style scoped>
</style>
